<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09.类式组件实例化对象props属性中</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react-dom核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器-->
    <div id="root"></div>
    <!--5、设置脚本类型,相当于里面所有代码都默认处在严格模式下，而严格模式下的函数的this为undefined-->
    <script type="text/babel">
        //6、创建容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //7、创建类组件
        let { Component } = React;
        //props和state是在组件实例化对象身上的属性,当组件想要向外传递数据的时候，用到props
        //props的作用其实是父组件向子组件传递属性数据的
        //父组件
        class App extends Component {
            //类中声明的时候只可以是：属性/方法； 语句不可以
            render() {
                // console.log(this);
                let arr = [
                    {
                        userid: 1,
                        username: '张三',
                        userage: 23,
                        userhobby: ['敲代码', '学习', '看书', '看报']
                    },
                    {
                        userid: 2,
                        username: '李四',
                        userage: 24,
                        userhobby: ['敲代码', '学习', '看书']
                    },
                    {
                        userid: 3,
                        username: '王五',
                        userage: 25,
                        userhobby: ['敲代码', '学习', '看报']
                    },
                    {
                        userid: 4,
                        username: '赵六',
                        userage: 26,
                        userhobby: ['敲代码', '看书', '看报']
                    }
                ]

                return <div>
                    {/* 调用子组件 */}
                    {
                        arr.map(item => {
                            return <Child {...item} key={item.userid}>尚硅谷</Child>
                        })
                    }
                </div>
            }
        }
        //子组件
        class Child extends Component {
            render() {
                //解构
                let { username, userage, userhobby } = this.props;
                // console.log(typeof userage);
                console.log(this)
                return <div>
                    <ul>
                        <li>姓名：{username}</li>
                        <li>年龄：{userage}</li>
                        <li>爱好：{userhobby.join('/')}</li>
                        <li>学校：{this.props.children}</li>
                    </ul>
                </div>
            }
        }
        //8、渲染
        root.render(<App />); // let s1 = new App()
    </script>
</body>

</html>